<template>
	<view class="withdraw-details">
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
		</view>
		<view class="center">
			<swiper :current="tabIndex" class="swiper-box" duration="300" @change="changeTab">
				<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
					<scroll-view class="list-scroll-content" scroll-y>
						<view style="height: 80upx;"></view>
						<view v-if="data.length != 0">
							<view class="consume-item" v-for="(item, index) in data" :key="index">
								<view class="consume-left">
									<view class="num" style="font-size: 26upx;">提现{{ item.number }}元,实到账{{ item.real_number }}元</view>
									<!-- <view class="num" style="font-size: 26upx;">提现{{ item.number }}元,手续费{{ item.service_charge }}元，实到账{{ item.real_number }}元</view> -->
									<view class="time" v-if="item.status == 0">{{ item.createtime }}</view>
									<view class="time" v-else>{{ item.update_at }}</view>
								</view>
								<view class="state1" v-if="item.status == 0">审核中</view>
								<view class="state2" v-if="item.status == 1">已完成</view>
								<view class="state3" v-if="item.status == 2">失败了</view>
							</view>
						</view>
						<view class="none" v-else>暂无数据</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
// import service from '@/store/service.js';
export default {
	data() {
		return {
			tabIndex: 0,
			data: [],
			navList: [
				{
					text: '全部',
					state: ''
				},
				{
					text: '审核中',
					state: '0'
				},
				{
					text: '已完成',
					state: '1'
				},
				{
					text: '已失败',
					state: '2'
				}
			]
		};
	},
	onLoad: function() {
		this.getWithdraw();
	},
	methods: {
		getWithdraw() {
			var self = this;
			self.$Request.get(this.$api.user.withdrawalLog, {
					pay_type: 0,
					status: self.navList[self.tabIndex].state
				})
				.then(function(res) {
					var list = res.data.data;
					self.data = list;
					console.log(self.data.length, 222);
				});
		},
		//swiper 切换
		changeTab(e) {
			this.tabClick(e.target.current);
		},
		//顶部tab点击
		tabClick(index) {
			this.change(index);
			this.getWithdraw();
		},
		change(type) {
			this.tabIndex = type;
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	height: 100%;
}

.swiper-box {
	height: 100%;
	// padding-top: 90upx;
	box-sizing: border-box;
	padding-bottom: 20upx;
	// margin-bottom: 90upx;
}

uni-swiper-item {
	overflow: auto;
}

.navbar {
	width: 100%;
	display: flex;
	height: 40px;
	// top: 80upx;
	// padding: 0 5px;
	background: #fff;
	box-shadow: 0px 4upx 8upx #dcdfe6;
	position: fixed;
	z-index: 200;
	.nav-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		font-size: 15px;
		color: #303133;
		position: relative;
		&.current {
			color: #f81149;
			&:after {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				width: 60px;
				height: 0;
				border-bottom: 2px solid #f81149;
				/* border-bottom: 2px solid #fa436a; */
			}
		}
	}
}
.center {
	width: 100%;
	height: 100%;
	z-index: 120;
	// padding-top: 80upx;
	position: absolute;
}
.swiper-box {
	height: 100%;
}
.consume {
	// margin-top: 80upx;
}
.consume-item {
	background-color: #fff;
	// margin-top: 20upx;
	display: flex;
	justify-content: space-between;
	padding: 28upx 22upx 22upx;
	border-bottom: 1px solid #f4f4f4;
}
.num {
	font-weight: bold;
}
.time {
	color: #999;
	font-size: 24upx;
	font-weight: 500;
}
.state1,
.state2,
.state3 {
	display: flex;
	align-items: center;
}
.state1 {
	color: #ff594d;
}
.state2 {
	color: #f81149;
}
.state3 {
	color: #666666;
}
.none {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 100upx;
}
</style>
